<template>
  <!-- 背景图 -->
  <div class="bcpic"></div>
  <!-- 表单元素 -->
  <main>
    <van-tabs @click="onClick" line-width="0" line-height="0">
      <van-tab title="机票" @click="show">
        <van-tabs @click="onClick" line-width="0" line-height="0">
          <!-- 汽车票查询页 -->
          <van-tab title="单程" title-style="22px" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <div class="check">
                <span>舱位选择</span>
                <form action="">
                  <input type="radio" checked="checked" name="checked" />

                  <span>带儿童</span> <span>2-12岁</span>

                  <input type="radio" name="checked" />
                  <span>带婴儿</span>
                  <span>14天-2岁</span>
                </form>
              </div>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 机场巴士查询页 -->
          <van-tab title="往返" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff1034, #ee7a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 景区巴士查询页 -->
          <van-tab title="多程" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #fa7034, #ea5a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>

      <!--  -->
      <van-tab title="特价机票">
        <van-tabs @click="onClick" line-width="0" line-height="0">
          <!-- 汽车票查询页 -->
          <van-tab title="单程" title-style="22px" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <div class="check">
                <span>舱位选择</span>
                <form action="">
                  <input type="radio" checked="checked" name="checked" />

                  <span>带儿童</span> <span>2-12岁</span>

                  <input type="radio" name="checked" />
                  <span>带婴儿</span>
                  <span>14天-2岁</span>
                </form>
              </div>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 机场巴士查询页 -->
          <van-tab title="往返" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff1034, #ee7a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 景区巴士查询页 -->
          <van-tab title="多程" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #fa7034, #ea5a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </main>
  <!--  -->
  <footer>
    <p class="query">最近查询</p>
    <div class="travel">
      <h3>出行助手</h3>
      <div class="outt">
        <div class="box1">
          <h4>低价机票</h4>
          <p>查询当日/特价机票</p>
          <img src="http://10.31.165.26:3000/images/4.png" alt="" />
        </div>
        <div class="right-box">
          <div class="box2">
            <h4>降价提醒</h4>
            <p>机票降价实时监控</p>
            <img src="http://10.31.165.26:3000/images/2.png" alt="" />
          </div>
          <div class="box3">
            <h4>团购机票</h4>
            <p>结伴特享优惠</p>
            <img src="http://10.31.165.26:3000/images/3.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </footer>
  <div class="fanhui" @click="fanhui">
    <van-icon name="arrow-left" />
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const fanhui = () => {
      router.go(-1);
    };
    return { fanhui };
  },
};
</script>
<style lang="less" scoped>
.fanhui {
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 18px;
  color: white;
  display: block;
  width: 20px;
  height: 20px;
  z-index: 5;
}
.bcpic {
  width: 375px;
  height: 138px;
  background: url(http://10.31.165.26:3000/images/1.png) no-repeat;
  background-size: 100% 100%;
}
main {
  width: 357px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
  margin-left: 9px;

  .van-tab__pane {
    width: 357px;
    height: 226px;
    .van-tab__text--ellipsis {
      font-size: 15px;
    }
    .van-col {
      font-size: 14px;
      text-align: center;
    }
    .search {
      width: 304px;
      p {
        font-size: 14px;
        line-height: 42px;
        width: 304px;
        border-bottom: 1px solid;
      }
    }
    .carlist {
      display: flex;
      justify-content: center;
      .van-button {
        border-radius: 8px;
      }
      .check {
        display: flex;
        width: 100%;
        height: 29px;
        justify-content: space-around;
        align-items: center;
        form {
          display: flex;
        }

        span {
          font-size: 14px;
        }
      }
    }
  }
}
footer {
  width: 357px;
  margin-top: 9px;
  margin-left: 9px;

  .query {
    font-size: 15px;
    height: 31px;
    text-align: center;
    line-height: 31px;
    border: 1px dashed;
    color: grey;
  }
  .travel {
    width: 100%;
    height: 158px;
    margin-top: 9px;

    h3 {
      font-size: 14px;
    }
    .outt {
      display: flex;
      justify-content: space-between;
      margin-top: 9px;
      img {
        width: 35px;
        height: 40px;
        position: absolute;
        right: 16px;
        top: 12px;
      }
      h4 {
        font-size: 14px;
        margin: 40px 0 5px 14px;
      }
      p {
        font-size: 12px;
        margin-left: 13px;
      }

      .box1 {
        width: 165px;
        height: 117px;
        background: #f9fbfd;
        position: relative;
      }
      .right-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h4 {
          margin: 13px 0 5px 13px;
        }
        .box2 {
          width: 165px;
          height: 54px;
          background: #f9fbfd;
          position: relative;
          img {
            width: 26px;
            height: 34px;
            right: 10px;
          }
        }
        .box3 {
          width: 165px;
          height: 54px;
          background: #f9fbfd;
          position: relative;
          img {
            width: 34px;
            height: 34px;
            right: 9px;
          }
        }
      }
    }
  }
}
</style>
